<@body1 title="平铺化菜单" class="page-sidebar-closed-hide-logo page-content-white page-sidebar-fixed">
<link rel="stylesheet" href="${ctxPath}/assets/iconfont/iconfont.css?${currentTimeMillis}">
<link rel="stylesheet" href="${ctxPath}/assets/css/main.css?${currentTimeMillis}">
<link rel="stylesheet" href="${ctxPath}/webui/mega-menu/css/mega-menu.css?${currentTimeMillis}">
<link rel="stylesheet" href="${ctxPath}/webui/mega-menu/css/mega-menu-orange.css?${currentTimeMillis}">
<link rel="stylesheet" href="${ctxPath}/webui/mega-tabcontent/css/mega-tabcontent.css?${currentTimeMillis}">
<link rel="stylesheet" href="${ctxPath}/webui/mega-tabcontent/css/mega-tabcontent-orange.css?${currentTimeMillis}">


<nav class="nav navbar-default navbar-static-top rb-nav-wrapper" role="navigation">
    <!-- BEGIN MEGA MENU -->
    <div class="rb-nav-container">
        <div class="navbar-header rb-navbar-logo">
            <a href="javascript:void(0);" class="rb-navbar-logo-link">
                <span><i class="rb-icon rb-icon-amarsoft"></i></span>
            </a>
        </div>

        <div class="navbar-nav navbar-left rb-nav-menu-wrapper">
            <ul class="nav rb-nav-menu-container" id="rb-nav-menu-container">
                <script id="rb-nav-menu" type="text/x-dot-template">
                    <li class="rb-nav-menu-item">
                        <span class="active-hover"></span>
                        <a href="javascript:void(0);">
                            <span class="icon-wrap">
                               <i class="{{=it.icon}}"></i>
                           </span>
                            <span>
                            <label>{{=it.name}}</label>
                           </span>
                        </a>
                    </li>
                </script>
            </ul>
            <div>
                <span class='rb-nav-slip' id='rb-nav-slip-left'><i></i></span>
                <span class='rb-nav-slip' id='rb-nav-slip-right'><i></i></span>
            </div>
        </div>

        <div class="container rb-nav-pulldown" id="rb-nav-pulldown-container">
        </div>
        <!-- script模板是上面div的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
        <script id="rb-nav-menu-subcontent" type="text/x-dot-template">
            <ul class="list-inline rb-nav-menu-subcontent">
                <li class="sec-level-item">
                    <a href="javascript:void(0);">
                        {{? it.icon}}
                        <i class="{{=it.icon}}"></i>
                        {{?}}
                        <label>{{=it.name}}</label>
                    </a>
                </li>
            </ul>
        </script>

        <script id="sub-rb-nav-menu-subcontent" type="text/x-dot-template">
            <ul class="sub-rb-nav-menu-subcontent">
                <li class="trd-level-item">
                    <a href="javascript:void(0);">
                        <span class="sub-rb-nav-menu-subcontent-value">{{=it.name}}</span>
                        {{? it.children && it.children.length}}
                        <b class="caret right"></b>
                        {{?}}
                    </a>
                </li>
            </ul>
        </script>

        <script id="ulti-rb-nav-menu-subcontent" type="text/x-dot-template">
            <ul class="ulti-rb-nav-menu-subcontent">
                <li class="fth-level-item">
                    <a href="javascript:void(0);">
                        <span class="ulti-rb-nav-menu-subcontent-value">{{=it.name}}</span>
                    </a>
                </li>
            </ul>
        </script>
        <!-- <script id="rb-nav-pulldown" type="text/x-dot-template"> -->
        <!-- 这个方法绑click事件很棘手 -->
        <!--         {{ for(var i=0, menu=it.children; i<menu.length; i++){ }}
                    <ul class="list-inline rb-nav-menu-subcontent">
                      <li class="sec-level-item">
                          <a href="javascript:void(0);">
                            {{? menu[i].icon}}
                              <i class="{{=menu[i].icon}}"></i>
                            {{?}}
                            <label>{{=menu[i].name}}</label>
                          </a>
                      </li>
                        {{ for(var j=0, subMenu=menu[i].children; subMenu && subMenu.length && j<subMenu.length; j++){ }}
                          <ul class="sub-rb-nav-menu-subcontent">
                              <li class="trd-level-item">
                                  <a href="javascript:void(0);">
                                      <span class="sub-rb-nav-menu-subcontent-value">{{=subMenu[j].name}}</span>
                                      {{? subMenu[j].children && subMenu[j].children.length}}
                                        <b class="caret right"></b>
                                      {{?}}
                                  </a>
                              </li>
                                {{ for(var k=0, ultiMenu=subMenu[k].children; ultiMenu && ultiMenu.length && k<ultiMenu.length; k++){ }}
                                  <ul class="ulti-rb-nav-menu-subcontent">
                                      <li class="fth-level-item">
                                          <a href="javascript:void(0);">
                                              <span class="ulti-rb-nav-menu-subcontent-value">{{=ultiMenu[k].name}}</span>
                                          </a>
                                      </li>
                                  </ul>
                              {{ } }}
                          </ul>
                      {{ } }}
                    </ul>
                {{ } }} -->
        <!-- </script> -->

        <ul class="nav navbar-nav navbar-right rb-nav-right">
            <!-- BEGIN USER LOGIN DROPDOWN -->
            <li class="dropdown">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                    <img width="40px" height="40px" alt="" class="img-circle"/>
                    <span>测试用户</span>
                    <i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-menu-default">
                    <li>
                        <a href="javascript:void(0);"><i class="icon-user"></i>我的信息</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:void(0);"><i class="icon-user"></i>修改密码</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i class="icon-lock"></i>锁屏</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><i class="icon-key"></i>注销</a>
                    </li>
                </ul>
            </li>
            <!-- END USER LOGIN DROPDOWN -->
        </ul>
    </div>
    <!-- END MEGA MENU -->


</nav>

<!-- BEGIN CONTENT -->
<div class="rb-page-content-wrapper" id="rb-main-content">
    <!--<div id="spinner">-->
    <!--<i class="fa fa-spinner spinner">-->
    <!--</i>-->
    <!--</div>-->
    <!-- BEGIN CONTENT BODY -->
    <div class="rb-page-content" id="rb-main-content-container">
        <div class="rb-main-tabs-container">
            <ul class="nav nav-tabs rb-nav-tabs" id="rb-nav-tabs-visable">
            </ul>
            <!-- script模板是上面ul的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
            <script id="rb-nav-tabs-item" type="text/x-dot-template">
                <li>
                    <div class="glyphicon glyphicon-remove rb-tab-close"></div>
                    <div class="glyphicon glyphicon-refresh rb-tab-refresh"></div>
                    <a style="cursor:move" href="javascript:;" title="{{=it.allName}}" id="rb-tab-nav-{{=it.id}}">
                        {{=it.header}}
                    </a>
                </li>
            </script>

            <li class="dropdown pull-right rb-tabsmore">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">
                    <span class="badge" ng-cloak data-ng-bind="tabsCollapse.length"></span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" id="rb-nav-tabs-collapse">
                </ul>
                <!-- script模板是上面ul的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
                <script id="rb-nav-tabs-collapse-item" type="text/x-dot-template">
                    <li>
                        <a class="rb-collapse-tab" href="javascript:void(0);">
                       <span ng-cloak>
                         {{=it.header}}
                         <span class="glyphicon glyphicon-remove rb-remove-collapse-tab">
                         </span>
                       </span>
                        </a>
                    </li>
                </script>
            </li>

            <li class="dropdown pull-right rb-tabdrop">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-close-others="true">
                    <span class="glyphicon glyphicon-remove" style="font-size: large;color:#aaa"></span>
                    <b class="caret"></b>
                </a>

                <ul class="dropdown-menu dropdown-menu-default" id="rb-tabclose-container">
                    <li><a data-toggle="tab" id="rb-close-all">关闭所有</a></li>
                    <li><a data-toggle="tab" id="rb-close-other">关闭其他</a></li>
                </ul>
            </li>

            <div class="rb-tab-content-container">
                <div class="rb-tab-pane" id="rb-tab-pane">
                </div>
                <!-- script模板是上面div的子元素，由于将script模板标签放在上面的ul容器中js读取不到，因此放在下面 -->
                <script id="rb-breadcrumb" type="text/x-dot-template">
                    <ol class="breadcrumb rb-breadcrumb">
                        <span class="raxi raxi-0010home"></span>
                        {{ for(var i=0, breadcrumb=it.breadcrumbData; i<breadcrumb.length; i++){ }}
                        <li>
                            <span>{{=breadcrumb[i].name}}</span>
                        </li>
                        {{ } }}
                    </ol>
                </script>
                <!--<div id="containter-{{contentItem.id}}" class="tab-pane-content" ng-repeat="contentItem in tabContents" ng-class='contentItem .active?"active":""'></div>-->
            </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->

<!-- BEGIN FOOTER -->
<div class="footer">
    <div class="footer-inner"> 2017 &copy; 安硕信息
    </div>
    <div class="scroll-to-top">
        <i class="icon-arrow-up"></i>
    </div>
</div>

<script src="${ctxPath}/lang/array.js" charset="utf-8"></script>
<script src="${ctxPath}/lang/string.js" charset="utf-8"></script>
<script src="${ctxPath}/assets/js/rax.js" charset="utf-8"></script>
<script src="${ctxPath}/assets/js/rax-control.js" charset="utf-8"></script>
<script src="${ctxPath}/assets/mock/MenuData.js?${currentTimeMillis}" charset="utf-8"></script>
<script src="${ctxPath}/webui/mega-menu/js/mega-menu.js?${currentTimeMillis}"></script>
<script src="${ctxPath}/webui/mega-tabcontent/js/mega-tabcontent.js?${currentTimeMillis}"></script>
<script>
    $(function () {
        // mainController.rendMenuItem(_mockMenuData.body)
        var megatab = $.fn.megatab();
        console.log(megatab)
        $('#rb-nav-menu-container').megamenu({
            menudata: _mockMenuData.body,
            on: {
                menuItemClick: function(item, data){
                    // console.warn('未绑定')
                    megatab.onToggle(item, data)
                }
            }
        })
    })
</script>
</@body1>